<template>
  <div class="bg-white overflow-hidden">
    <div class="form-title">企业荣誉与资质情况</div>
    <el-form ref="honorForm" :model="tempFormObj" label-width="0">
      <table
        v-loading="formLoading"
        class="self-table-form w-full table-auto border-collapse border"
        style="min-height: auto"
      >
        <thead>
          <th
            v-for="item in headNameList"
            :key="item"
            class="m-label text-center"
          >
            {{ item }}
          </th>
          <th class="m-label text-center w-20">操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tempFormObj.list" :key="item.id">
            <td class="m-label text-center w-16">
              {{ index + 1 }}
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.name'"
                :rules="formRules.name"
              >
                <el-input type="text" v-model="item.name"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.qualificationsTime'"
                :rules="formRules.time"
              >
                <el-date-picker
                  v-model="item.qualificationsTime"
                  align="right"
                  type="date"
                  prefix-icon="el-icon"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.qualificationsType'"
                :rules="formRules.qualificationsType"
              >
                <el-input
                  type="text"
                  v-model="item.qualificationsType"
                ></el-input>
              </el-form-item>
            </td>
            <td>
              <div class="flex justify-center">
                <el-button
                  class="m-auto"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteFormItem(item.id)"
                >
                </el-button>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="headNameList.length + 1">
              <div class="flex justify-start">
                <el-button class="ml-0" type="primary" @click="addFormItem">
                  添加记录
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="flex justify-between py-10 text-center">
        <el-button
          v-if="isSubmit"
          class="confirm-btn tracking-widest"
          type="primary"
          size="medium"
          @click="submitForm"
        >
          保存 / 下一步
        </el-button>
        <DeclareNextItem ref="next" v-show="false" />
      </div>
    </el-form>
  </div>
</template>

<script>
import { checNumber, limitLength } from "@/utils/formRules.js";
import { addHonor } from "@/api/declareForm/honor";
import { getDeclareDetail } from "@/api/declareForm/getDetail";

export default {
  name: "EnterpriseHonor",
  props: {
    sourceList: {
      type: Array,
      default: [],
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      formLoading: false,
      headNameList: ["序号", "荣誉/资质名称", "获取荣誉时间", "颁奖单位"],
      modleFormObj: {
        id: -1,
        name: "",
        qualificationsTime: "",
        qualificationsType: "",
      },
      tempFormObj: {
        list: [],
        relationId: "",
      },
      formRules: {
        name: [
          { required: true, message: "请输入荣誉/资质名称 ", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
        time: [
          { required: true, message: "请选择获取荣誉时间", trigger: "change" },
        ],
        qualificationsType: [
          { required: true, message: "请输入颁奖单位", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
      },
      detailFormInfo: null,
    };
  },
  watch: {
    sourceList(v, oldv) {
      if (v) {
        this.tempFormObj.list = v;
      }
    },
  },
  created() {
    this.initRelationId();
    // this.initSourceInfo();
  },
  methods: {
    initSourceInfo() {
      this.tempFormObj.list = this.sourceList;
    },

    initRelationId() {
      let realationId = this.$route.query.id;
      if (realationId || realationId == 0) {
        this.tempFormObj.relationId = realationId;
      }
    },
    addFormItem() {
      let timeChuo = new Date();
      let addObj = JSON.parse(JSON.stringify(this.modleFormObj));
      addObj["id"] = timeChuo.valueOf();

      this.tempFormObj.list.push(addObj);
    },
    deleteFormItem(id) {
      let tempArr = JSON.parse(JSON.stringify(this.tempFormObj.list));
      let newArr = tempArr.filter((item) => {
        return item.id !== id;
      });
      this.tempFormObj.list = newArr;
    },
    submitForm() {
      let formName = "honorForm";
      let resForm = JSON.parse(JSON.stringify(this.tempFormObj));
      resForm.list.forEach((item) => {
        item.id = undefined;
      });
      // this.formLoading = true;
      // addHonor(resForm).then(res => {
      //   if (res.code == 200) {
      //     this.$message({
      //       type: "success",
      //       message: "保存成功"
      //     });
      //   }
      //   this.formLoading = false;
      // });
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          addHonor(resForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              // 跳转至下一页
              this.$refs.next.nextDeclareItem();
            } else {
              this.$message.error(res.msg);
            }
            this.formLoading = false;
          });
        }
      });
    },
  },
};
</script>

<style></style>
